<template>
  <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
  <div class="pane">
    <p @click="lineReplay">lineReplay</p>
    <p @click="markerReplay">markerReplay</p>
  </div>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"
import {ref} from "vue";

export default {
  name: "AddAnimatedLine.component",
  components: {Maptalks},
  setup() {

    let marker = ref(null), line = ref(null)
    let linePath = [
      [-0.131049, 51.498568],
      [-0.107049, 51.498568],
      [-0.107049, 51.491568]
    ];
    let offset = [
      [linePath[1][0] - linePath[0][0], linePath[1][1] - linePath[0][1]],
      [linePath[2][0] - linePath[1][0], linePath[2][1] - linePath[1][1]],
    ];
    /**
     * 播放marker动画
     */
    const markerReplay = () => {
      marker.value.setCoordinates(linePath[0]);
      marker.value.bringToFront().animate({
        //animation translate distance
        translate: offset[0]
      }, {
        duration: 2000,
        //let map focus on the marker
        focus: true
      }, function (frame) {
        if (frame.state.playState === "finished") {
          console.log("marker 2 frame start");
          // 这有点回调地狱的样子了呀，不好玩了
          marker.value.bringToFront().animate({
            translate: offset[1]
          }, {
            duration: 2000,
            focus: true
          }, function (frame) {
            if (frame.state.playState === "finished") {
              console.log("marker 2 frame finished");
            }
          })
        }
      });
    }

    /**
     * 播放line动画
     */
    const lineReplay = () => {
      line.value.hide();
      //line"s animateShow
      line.value.animateShow({
        duration: 1500,
        easing: "out"
      }, function (frame) {
        if (frame.state.playState === "finished") {
          console.log("line finished");
        }
      });
    }


    let mapOnLoadCB = (map, mapUtil) => {
      mapUtil.setView(linePath)

      line.value = new maptalks.LineString(linePath, {
        visible: false,
        arrowStyle: "classic",
        arrowPlacement: "vertex-last",
        symbol: {
          "lineColor": "#1bbc9b",
          "lineWidth": 6
        }
      });
      marker.value = new maptalks.Marker(linePath[0]);

      new maptalks.VectorLayer(MapLayerConst.MAP_LINE_ANIMATION_LAYER).addGeometry(line.value, marker.value).addTo(map);

      lineReplay();

    };

    return {
      mapOnLoadCB,
      markerReplay,
      lineReplay
    }
  }
}
</script>

<style scoped lang="less">
.pane {
  background: #34495e;
  line-height: 28px;
  color: #fff;
  z-index: 10;
  position: absolute;
  top: 20px;
  right: 20px;

  p {
    cursor: pointer;
    display: block;
    color: #fff;
    text-align: left;
    padding: 0 10px;
    min-width: 28px;
    min-height: 28px;
    float: left
  }
}
</style>
